<template>
    <PointView class="sPointView" ref="mPointView" @click="screenChange" />
    <van-button class="sTestBtn" type="primary" @click="testLoadIng">显示加载</van-button>
    <van-button class="sTestBtn" type="primary" @click="testSuccess">显示成功</van-button>
    <van-button class="sTestBtn" type="primary" @click="testFail">显示失败</van-button>
</template>
<script setup lang="ts">
import { ImgLoadState } from "@/data/constant/ImgLoadType";
import { getPointRes } from "@/widget/point/PointEnum";
import { ref } from "vue";
import PointView from "../../../widget/point/PointView.vue";

const POINT_DATA_JSON = [{ pointId: 4, pointX: 0.13904913, dataTime: "2022-09-14 15:56:48", pointY: 0.07365514, pointName: "SPCJ01", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 5, pointX: 0.28960578, dataTime: "2022-09-14 15:57:41", pointY: 0.077864, pointName: "SPCJ02", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 6, pointX: 0.38550173, dataTime: "2022-09-14 15:58:17", pointY: 0.07996843, pointName: "SPCJ03", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 7, pointX: 0.53030462, dataTime: "2022-09-14 15:58:52", pointY: 0.07575957, pointName: "SPCJ04", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 8, pointX: 0.60606242, dataTime: "2022-09-14 15:59:55", pointY: 0.077864, pointName: "SPCJ05", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 9, pointX: 0.71058901, dataTime: "2022-09-14 16:00:33", pointY: 0.07365514, pointName: "SPCJ06", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 10, pointX: 0.81127976, dataTime: "2022-09-14 16:01:37", pointY: 0.07365514, pointName: "SPCJ07", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 11, pointX: 0.91005259, dataTime: "2022-09-14 16:02:06", pointY: 0.06523741, pointName: "SPCJ08", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 12, pointX: 0.12945954, dataTime: "2022-09-14 16:03:06", pointY: 0.26305406, pointName: "SPCJ09", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 13, pointX: 0.2771393, dataTime: "2022-09-14 16:03:58", pointY: 0.25884519, pointName: "SPCJ10", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 14, pointX: 0.37495318, dataTime: "2022-09-14 15:37:47", pointY: 0.26094963, pointName: "SPCJ11", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 15, pointX: 0.46413641, dataTime: "2022-09-14 15:38:39", pointY: 0.25884519, pointName: "SPCJ12", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 16, pointX: 0.54085317, dataTime: "2022-09-14 15:39:26", pointY: 0.25674076, pointName: "SPCJ13", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 17, pointX: 0.66743583, dataTime: "2022-09-14 15:40:06", pointY: 0.25674076, pointName: "SPCJ14", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 18, pointX: 0.76429074, dataTime: "2022-09-14 15:40:39", pointY: 0.25463633, pointName: "SPCJ15", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 19, pointX: 0.86881733, dataTime: "2022-09-14 15:41:45", pointY: 0.25042746, pointName: "SPCJ16", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 20, pointX: 0.26275491, dataTime: "2022-09-14 15:43:13", pointY: 0.48822833, pointName: "SPCJ17", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 21, pointX: 0.37495318, dataTime: "2022-09-14 15:43:46", pointY: 0.4861239, pointName: "SPCJ18", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 22, pointX: 0.46701329, dataTime: "2022-09-14 15:44:26", pointY: 0.48401947, pointName: "SPCJ19", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 23, pointX: 0.55427861, dataTime: "2022-09-14 15:45:00", pointY: 0.47560174, pointName: "SPCJ20", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 24, pointX: 0.67894335, dataTime: "2022-09-14 15:45:45", pointY: 0.47139287, pointName: "SPCJ21", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 25, pointX: 0.77196242, dataTime: "2022-09-14 15:46:36", pointY: 0.47139287, pointName: "SPCJ22", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 26, pointX: 0.25891907, dataTime: "2022-09-14 15:47:20", pointY: 0.60397212, pointName: "SPCJ23", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 27, pointX: 0.37687109, dataTime: "2022-09-14 15:49:03", pointY: 0.60186768, pointName: "SPCJ24", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 28, pointX: 0.46893121, dataTime: "2022-09-14 15:50:01", pointY: 0.59976325, pointName: "SPCJ25", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 29, pointX: 0.56099132, dataTime: "2022-09-14 15:50:39", pointY: 0.59765882, pointName: "SPCJ26", warmType: 1, pointMonitorAttrCode: "" }, { pointId: 30, pointX: 0.68182023, dataTime: "2022-09-14 15:51:43", pointY: 0.59555439, pointName: "SPCJ27", warmType: 1, pointMonitorAttrCode: "" }]
const IMG_BG = "https://nb.hccservice.cn/files/CAD/911bcf7e-5ca1-4843-ba09-a72dcceefeaf.jpg"
const pointData = POINT_DATA_JSON.map((pointO: { pointId: any; pointX: any; pointY: any; warmType: number; }) => {
    return {
        pointId: pointO.pointId,
        scaleX: pointO.pointX,
        scaleY: pointO.pointY,
        pointRes: getPointRes(pointO.warmType)
    }
})

const mPointView = ref<InstanceType<typeof PointView>>()
const testLoadIng = () => {
    mPointView.value?.setLoadShowState(ImgLoadState.LOADING)
}
const testSuccess = () => {

    mPointView.value!.resetData({
        imgUrl: IMG_BG,
        pointData: pointData
    })
    mPointView.value!.selectPoint(4)
}
const testFail = () => {
    mPointView.value?.setLoadShowState(ImgLoadState.ERROR)
}
const screenChange = () => {
    mPointView.value?.setScreenHorizontal()
}
</script>
<style scoped>
.sPointView {
    display: block;
    height: 211px;
}

.sTestBtn {
    display: block;
}
</style>